<template>
	<view ref="pageRef" class="relative full-screen bg-white">
		<uni-nav-bar ref="navBar" class="absolute w-full h-full" style="z-index:1;top:0;left:0;height:80px;" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
			<template #left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
			<view class="flex center w-full fs-16"><text class="text-color-regular">火动会员</text></view>
		</uni-nav-bar>
		<view class="relative flex-col h-full">
			<view v-if="userStore.userInfo" class="relative" style="height:217px;background:linear-gradient(to bottom, #EBC689 0.32%, #F0D7AD 69.77%, transparent 100%);background: url('https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/vip-bg.png') no-repeat;background-position:center calc(100% + 5px);background-size:calc(100% + 40px) calc(100% + 25px);">
				<view class="absolute flex item-center px-20 py-12" style="left:16px;right:16px;bottom:10px;height:70px;">
					<image class="cu-avatar round size-46 mr-8" :src="userStore.userInfo.avatar"></image>
					<view class="flex-col" style="color:#6D5021;">
						<view class="inline-flex item-center">
							<text class="fs-16 font-semibold">{{userStore.userInfo.nickName}}</text>
							<template v-if="!isNotOpenVip">
								<image v-if="isVip" class="ml-8 h-16 w-48" src="@/pagesA/static/svg/vip-flag-normal.png"></image>
								<image v-else class="ml-8 h-16 w-48" src="@/pagesA/static/svg/vip-flag-expired.png"></image>
							</template>
						</view>
						<text v-if="isNotOpenVip" class="fs-11 font-normal">您当前未开通会员</text>
						<text v-else-if="isVip" class="fs-11 font-normal">有效期至 {{userStore.userInfo.businessInfo.memberExpireTime.split(' ')[0]}}</text>
						<text v-else class="fs-11 font-normal">已于 {{userStore.userInfo.businessInfo.memberExpireTime.split(' ')[0]}} 到期</text>
					</view>
				</view>
			</view>
			<view class="menu-list flex item-center justify-center">
				<template v-for="item in menu" :key="item.id">
					<view class="menu-item" :class="{'active':menuId == item.id}" @click="selMenu(item)">
						{{item.name}}
						<view class="sel-line" v-if="menuId == item.id"></view>
					</view>
				</template>
			</view>
			<scroll-view scroll-x class="pt-16 flex-shrink">
				<view class="flex px-16">
					<view v-for="(item,i) in vipList" :key="i" class="flex-col item-center" @click="currentSelectedIndex=i">
						<view class="pt-22 pr-23 pb-18 pl-13 radius-12" style="min-width:110px;" :class="i!==vipList.length-1?'mr-12':'mr-16'" :style="currentSelectedIndex===i ? 'border:3px solid #EABD81;background:#FEF8F1;':'border:3px solid #F5F5F5;background:#FFF;'">
							<view class="mb-16 fs-16 font-semibold leading-22 whitespace-nowrap" :style="currentSelectedIndex===i?'color:#865700':''">{{item.memberName}}</view>
							<view class="text-color-hint mb-4" :style="currentSelectedIndex===i?'color:#865700':''"><text class="fs-20 font-semibold">¥</text><text class="fs-32 font-bold">{{item.memberFee}}</text></view>
							<!-- <view class="text-color-disabled fs-16 font-bold text-throughline" :style="currentSelectedIndex===i?'color:rgba(136, 89, 2, 0.50);':''">¥{{item.originFee}}</view> -->
						</view>
						<image v-if="currentSelectedIndex===i" class="w-25 h-14" style="margin-top:-3px;" src="@/pagesA/static/svg/bg-vip-indicate.svg"></image>
					</view>
				</view>
			</scroll-view>
			<view class="flex-1 h-0 flex-col" style="background:#FFF;">
				<view class="h-48 flex item-center pl-32 fs-16 font-bold flex-shrink" style="border-radius: 12px 12px 0 0;background:linear-gradient(98deg, #F3DFC1 5.42%, #EBC07A 111.38%);color:#6D5021;">
					会员权益
				</view>
				<scroll-view scroll-y class="pt-16 flex-1 h-0">
					<view class="radius-12 mx-16 mb-12">
						<view style="border-radius:12px;border:1px solid #F1D8AF;background:#FFFAEF;">
							<view class="radius-12 p-12 flex justify-between item-center">
								<view class="inline-flex item-center">
									<image class="size-28 mr-8" src="@/pagesA/static/svg/vip-publish.svg"></image>
									<text class="text-color-regular fs-16 font-semibold">活动发布</text>
								</view>
								<view v-if="vipList.length" class="fs-14 font-normal" style="color:#6D5021;">{{vipList[currentSelectedIndex].activeCount}}次</view>
							</view>
							<view class="radius-12 p-12 flex justify-between item-center">
								<view class="inline-flex item-center">
									<image class="size-28 mr-8" src="@/pagesA/static/svg/vip-agent.svg"></image>
									<text class="text-color-regular fs-16 font-semibold">经纪人数</text>
								</view>
								<view v-if="vipList.length" class="fs-14 font-normal" style="color:#6D5021;">{{!vipList[currentSelectedIndex].maxInviteAgentCount ? '不限' : `${vipList[currentSelectedIndex].maxInviteAgentCount}人`}}</view>
							</view>
							<view class="radius-12 p-12 flex justify-between item-center">
								<view class="inline-flex item-center">
									<image class="size-28 mr-8" src="@/pagesA/static/svg/vip-merchant.svg"></image>
									<text class="text-color-regular fs-16 font-semibold">单次活动可参与商户数</text>
								</view>
								<view v-if="vipList.length" class="fs-14 font-normal" style="color:#6D5021;">{{!vipList[currentSelectedIndex].singleActiveMerchantCount ? '不限' : `${vipList[currentSelectedIndex].singleActiveMerchantCount}家`}}</view>
							</view>
						</view>
						<view class="p-16 flex justify-between text-color-regular mt-12" style="border-radius:12px;background:#FFF;filter:drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15));">
							<view class="flex-1 flex-col item-center">
								<image class="size-32 mb-4" src="@/pagesA/static/svg/vip-yjfx.svg"></image>
								<text class="fs-12">一键分销</text>
							</view>
							<view class="flex-1 flex-col item-center">
								<image class="size-32 mb-4" src="@/pagesA/static/svg/vip-kzfz.svg"></image>
								<text class="fs-12">空中分账</text>
							</view>
							<view class="flex-1 flex-col item-center">
								<image class="size-32 mb-4" src="@/pagesA/static/svg/vip-lhyx.svg"></image>
								<text class="fs-12">裂变营销</text>
							</view>
							<view class="flex-1 flex-col item-center">
								<image class="size-32 mb-4" src="@/pagesA/static/svg/vip-jysj.svg"></image>
								<text class="fs-12">积分商城</text>
							</view>
						</view>
					</view>
					<view class="mx-16 mb-12 px-16 py-12 radius-12" style="background:#FFF;box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.15);">
						<view class="mb-16 text-color-regular fs-16 font-semibold leading-22">支付方式</view>
						<view class="flex justify-between item-center" @click="payType=1">
							<view class="inline-flex item-center">
								<image class="size-24 mr-8" src="@/static/svg/publish/icon-wechat.svg"></image>
								<text class="text-color-regular fs-14 font-normal">微信支付</text>
							</view>
							<image v-if="payType===1" class="size-16" src="@/static/svg/radio-checked.svg"></image>
							<image v-else class="size-16" src="@/static/svg/radio-default.svg"></image>
						</view>
						<view v-if="financialAccountType != 2" class="mt-12 flex justify-between item-center" @click="payType=2">
							<view class="inline-flex item-center">
								<image class="size-24 mr-8" src="@/static/svg/publish/icon-internetbank.svg"></image>
								<text class="text-color-regular fs-14 font-normal">网银对公打款</text>
							</view>
							<image v-if="payType===2" class="size-16" src="@/static/svg/radio-checked.svg"></image>
							<image v-else class="size-16" src="@/static/svg/radio-default.svg"></image>
						</view>
						<view v-if="payType===2">
							<view class="mt-4 leading-17 fs-12 font-normal">对公打款请复制下列地址，前往PC端登录商家后台进行操作。</view>
							<view class="mt-12 h-23 bg-default flex item-center px-8 text-color-hint fs-12 font-normal">{{bankPayUrl}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="w-screen px-16 py-8 flex-shrink" style="background:#FFF;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.15);">
				<view class="radius-12 flex justify-between item-center px-16" style="height:52px;background:linear-gradient(98deg, #F3DFC1 5.42%, #EBC07A 111.38%);" @click="toPay">
					<view v-if="vipList.length" style="color:#865700;">
						<text class="fs-20 font-semibold mr-4">¥{{vipList[currentSelectedIndex].memberFee}}</text>
						<!-- <text class="fs-12 text-throughline">¥{{vipList[currentSelectedIndex].originFee}}</text> -->
					</view>
					<view v-if="payType===1" class="fs-16 font-semibold" style="color:#865700;">确认协议并付款</view>
					<view v-else-if="payType===2" class="fs-16 font-semibold" style="color:#865700;">复制链接</view>
				</view>
				<view class="mt-4 mb-16 leading-17 fs-12 text-center">
					<text class="text-color-hint">开通前请阅读</text>
					<text class="text-color-regular" @click="toLink">《会员协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="Vip">
	import { onMounted, ref, computed } from 'vue'
	import { getVipListApi, createOrderApi, payApi } from '@/pagesA/api/vip.js'
	import { queryOrderPay } from '@/api/order.js'
	import { getBankPayUrlApi } from '@/api/common.js'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import { useWebView } from '@/hooks/useWebView.js'
	
	const menuId = ref(2)
	const menu = ref([
	{
	  name: '商户版',
	  id: 2,
	},{
	  name: '商场版',
	  id: 1,
	}])
	
	const currentSelectedIndex = ref(0)
	const vipList = ref([])
	
	const selMenu = (item) => {
		currentSelectedIndex.value = 0
		menuId.value = item.id
		reFresh()
	}
	
	const reFresh = () => {
		getVipListApi({memberType: menuId.value}).then(res => {
			vipList.value = res.list
		})
	}
	
	const webview = useWebView()
	const userStore = useUserStore()
	const pageRef = ref(null)
	
	const navBar = ref(null)
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	
	const goBack = () => uni.navigateBack()

	// 是否未过期会员
	const isVip = computed(() => {
		return userStore.userInfo && userStore.userInfo.businessInfo && userStore.userInfo.businessInfo.memberExpireTime && (new Date(userStore.userInfo.businessInfo.memberExpireTime).getTime() > new Date().getTime()) || false
	})
	// 未开通会员
	const isNotOpenVip = computed(() => {
		return !(userStore.userInfo && userStore.userInfo.businessInfo && userStore.userInfo.businessInfo.memberExpireTime) || false
	})
	
	// 类型
	const financialAccountType = computed(() => {
		return userStore.userInfo.businessInfo.financialAccountType
	})
	
	const toLink = () => {
		webview.showVIPServiceAgreement('会员协议')
	}
	
	const payType = ref(1) // 支付方式(1-微信，2-网银对公)
	
	const toPay = () => {
		const selected = vipList.value[currentSelectedIndex.value]
		if (!selected) {
			uni.showToast({
				title: '请先选择会员类型',
				icon: 'none'
			})
			return
		}
		
		if (payType.value === 1) {
			uni.showLoading()
			createOrderApi({
				payType: payType.value,
				id: selected.id
			}).then(res => {
				uni.hideLoading()
				payCallback(res)
			})
		} else if (payType.value === 2) {
			uni.setClipboardData({
				data: bankPayUrl.value,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				},
				fail: () => {
				}
			})
		}
	}
	
	const payCallback = async (orderNo) => {
		const res = await payApi({ orderNo })
		const orderInfo = JSON.parse(res.orderNo)
		uni.requestPayment({
			provider: 'wxpay',
			...orderInfo,
			success() {
				uni.showLoading()
				queryOrderPay({ orderNo }).then((res) => {
					console.log('查单结果', res)
				}).finally(() => {
					uni.hideLoading()
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					})
					userStore.getUserInfo()
				})
			},
			fail(e) {
				if (e.errMsg === 'requestPayment:fail cancel') {
					// 取消支付
					queryOrderPay({ orderNo }).then((res) => {
						console.log('查单结果', res)
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: e.errMsg,
						duration: 2000
					})
				}
			}
		})
	}
	
	// 获取网银支付地址
	const bankPayUrl = ref('')
	const getBankPayUrl = () => {
		getBankPayUrlApi().then(res => {
			bankPayUrl.value = res
		})
	}
	
	const initData = () => {
		reFresh()
		getBankPayUrl()
	}
	
	onMounted(() => {
		initData()
	})
</script>
<style lang="scss" scoped>
	.menu-list {
		background-color: #ffffff;
		padding: 10px 0 0 0;
		position: relative;
		z-index: 4;
		.menu-item {
			width: 35%;
			text-align: center;
			position: relative;
			font-size: 30rpx;
			font-weight: 400;
			line-height: 22px;
			height: 30px;
			color: rgba(51, 51, 51, 0.6);
	
			&.active {
				color: rgba(51, 51, 51, 1);
			}
	
			.sel-line {
				position: absolute;
				width: 19px;
				height: 4px;
				background: rgba(250, 69, 67, 1);
				border-radius: 4px;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
</style>